<template>
  <div :class="['el-button',{[`el-button__${type}-${plain}`]: Object.keys(this.$attrs).indexOf('plain') > -1},`el-button__${size}`,`el-button__${type}`,{[`is-${shape}`]: Object.keys(this.$attrs).indexOf('round') > -1},{[`is-${circle}`]: Object.keys(this.$attrs).indexOf('circle') > -1},{[`is-${disabled}`]: Object.keys(this.$attrs).indexOf('disabled') > -1}]" @click="triggerClick">
    <span v-if="Object.keys(this.$attrs).indexOf('text') > -1">{{this.$attrs.text}}</span>
    <slot v-else></slot>
  </div>
</template>

<script>
export default {
  name: 'el-button',
  data () {
    return {
      shape: 'round',
      circle: 'circle',
      plain: 'plain',
      disabled: 'disabled'
    }
  },
  props: ['type', 'size'],
  methods: {
    /* fn () {
      console.log(Object.keys(this.$attrs).indexOf('abc') > -1)
    } */
    triggerClick () {
      this.$emit('click')
    }
  }
}
</script>

<style scoped>
  *{
    margin: 0;
    padding: 0;
  }
  .el-button{
    display: inline-block;
    margin: 10px 10px;
    line-height: 1;
    cursor: pointer;
    background-color: #fff;
    border: 1px solid #fff;
    color: #000;
    text-align: center;
    box-sizing: border-box;
    outline: none;
    transition: .1s;
    padding: 28px 90px;
    font-size: 35px;
    border-radius: 5px;
  }
  .el-button:hover{
    color:#409eff;
    border-color:#c6e2ff;
    background-color:#ecf5ff;
  }
  .el-button__primary {
    color: #fff;
    background-color: #409eff;
    border-color: #409eff;
  }
  .el-button__primary:hover {
    background: #66b1ff;
    border-color: #66b1ff;
    color: #fff;
  }
  .is-round{
    border-radius: 20px;
    padding: 12px 22px;
  }
  .is-circle{
    border-radius: 50%;
    padding: 12px 15px;
  }
  .is-disabled{
    cursor: not-allowed;
    opacity: 0.5;
  }
  .el-button__success{
    color: #fff;
    background-color: #67c23a;
    border-color: #67c23a;
  }
  .el-button__success:hover{
    background:#85ce61;
    border-color:#85ce61;
    color:#fff;
  }
  .el-button__info{
    background-color: #fff;
    border: 1px solid #909399;
    color: #333;
  }
  .el-button__info:hover{
    background-color: #a6a9ad;
    border: 1px solid #a6a9ad;
    color: #fff;
  }
  .el-button__warning{
    background-color: #e6a23c;
    border: 1px solid #e6a23c;
    color: #fff;
  }
  .el-button__warning:hover{
    background-color: #ebb563;
    border: 1px solid #ebb563;
    color: #fff;
  }
  .el-button__danger{
    background-color: #f56c6c;
    border: 1px solid #f56c6c;
    color: #fff;
  }
  .el-button__danger:hover{
    background-color: #f78989;
    border: 1px solid #f78989;
    color: #fff;
  }
  .el-button__medium{
    padding: 10px 20px;
    font-size: 14px;
    border-radius: 4px;
  }
  .el-button__small{
    padding: 9px 15px;
    font-size: 12px;
    border-radius: 3px;
  }
  .el-button__mini{
    padding: 7px 15px;
    font-size: 12px;
    border-radius: 3px;
  }
  .el-button__primary-plain{
    color:#409eff;
    background:#ecf5ff;
    border-color:#b3d8ff;
  }
  .el-button__primary-plain:hover{
    color: #fff;
    background-color: #409eff;
    border-color: #409eff;
  }
  .el-button__success-plain{
    color:#67c23a;
    background:#f0f9eb;
    border-color:#c2e7b0;
  }
  .el-button__success-plain:hover{
    color: #fff;
    background-color: #67c23a;
    border-color: #67c23a;
  }
  .el-button__info-plain{
    color:#909399;
    background:#f4f4f5;
    border-color:#d3d4d6;
  }
  .el-button__info-plain:hover{
    background-color: #909399;
    border: 1px solid #909399;
    color: #fff;
  }
  .el-button__warning-plain{
    color:#e6a23c;
    background:#fdf6ec;
    border-color:#f5dab1;
  }
  .el-button__warning-plain:hover{
    background-color: #e6a23c;
    border: 1px solid #e6a23c;
    color: #fff;
  }
  .el-button__danger-plain{
    color:#f56c6c;
    background:#fef0f0;
    border-color:#fbc4c4;
  }
  .el-button__danger-plain:hover{
    background-color: #f56c6c;
    border: 1px solid #f56c6c;
    color: #fff;
  }
</style>
